<template>
    <!--顶部导航栏 start-->
    <ExamMenu/>
    <!--顶部导航栏 end-->
    <div class="announcement-page">
      <h2 class="announcement-page__title">最新公告</h2>
      <el-row :gutter="20">
        <el-col 
          v-for="item in announcements" 
          :key="item.id"
          :xs="24" 
          :sm="12" 
          :md="8"
        >
          <el-card class="announcement-card">
            <template #header>
              <div class="announcement-card__header">
                <h3>{{ item.title }}</h3>
                <div class="announcement-card__time">
                  {{ item.createTime}}
                </div>
              </div>
            </template>
            <div class="announcement-card__content" v-html="item.content" ref="markdownContent">


            </div>
            <el-button 
              class="view-button"
              type="primary"
              @click="viewDetail(item.id)"
            >
              查看详情
            </el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--底部 start-->
    <ExamFooter/>
    <!--底部 end-->
  </template>
  
  <script setup lang="ts">
  import { ref,onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
import { noticePagingApi } from '@/api/index';
  
  const router = useRouter()
  
  interface Announcement {
    id: number
    title: string
    content: string
    publishTime: Date
  }
  
  const announcements = ref<Announcement[]>([])
  
  const formatTime = (date: Date) => {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  }
  
  const viewDetail = (id: number) => {
    router.push(`/notice/detail/${id}`)
  }

  /**
   * 加载数据
   */
  const loadData = async() => {
    // 查询参数
    const params = {
      pageNum: 1,
      pageSize: 10
    }
    try {
      const { data } = await noticePagingApi(params)
      announcements.value = data.records
    } catch (error) {
      console.log(error)
    }
  }
  onMounted(() => {
    loadData()
  })
  </script>
  
  <style lang="scss" scoped>
  @import '@/assets/scss/announcement.scss';
  </style>